<template>
  <view
    class="popup_box"
    @click="backClick"
    :class="isAnima ? 'back_display' : 'back_hide'"
    v-if="isDisplay"
  >
    <view
      class="popup_body"
      :class="isAnima ? 'box_display' : 'box_hide'"
      @click.stop=""
    >
      <view class="popup_content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<!-- 资产确认弹窗 -->
<script lang="ts" setup>
import { ref } from 'vue'

//接受父组件参数
const props = defineProps({
  /**
   * 是否启用点击蒙层隐藏
   */
  isBackHide: {
    type: Boolean,
    default: true,
  },
})

//是否显示组件
const isDisplay = ref<boolean | null>(null)

//是否显示组件
const isAnima = ref(false)

//点击是否可用,防止重复点击
const isLoadEnd = ref(true)

//背景被点击事件
const backClick = () => {
  if (props.isBackHide) {
    close()
  }
}

//打开
const open = () => {
  if (!isLoadEnd.value) {
    return
  }
  isLoadEnd.value = false
  isDisplay.value = true
  isAnima.value = true
  setTimeout(() => {
    isLoadEnd.value = true
  }, 500)
}

//关闭
const close = () => {
  if (!isLoadEnd.value) {
    return
  }
  isLoadEnd.value = false
  isAnima.value = false
  setTimeout(() => {
    isDisplay.value = false
    isLoadEnd.value = true
  }, 500)
}

defineExpose({
  open,
  close,
})
</script>

<style scoped lang="scss">
.popup_box {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: all 0.2s;

  .popup_body {
    width: calc(100% - 60rpx);
    max-height: 86%;
    min-height: 200rpx;
    padding: 30rpx;
    background-color: $uni-bg-color;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    margin-top: auto;
    transition: all 0.2s;
  }

  .popup_content {
    width: 100%;
    height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

.back_hide {
  animation: back_hide 0.4s ease-in-out forwards;
}

.back_display {
  animation: back_display 0.4s ease-in-out forwards;
}

.box_hide {
  animation: box_hide 0.4s ease-in-out forwards;
}

.box_display {
  animation: box_display 0.4s ease-in-out forwards;
}

@keyframes back_hide {
  0% {
    background-color: rgba(150, 147, 147, 0.317);
  }
  100% {
    background-color: transparent;
  }
}
@keyframes back_display {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: rgba(150, 147, 147, 0.317);
  }
}

@keyframes box_hide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.6;
    transform: translateY(100%);
  }
}
@keyframes box_display {
  0% {
    opacity: 0.6;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
